<template>
  <div class="inner-wrapper">
    <el-row>
      <el-col :span="24">
        <div class="grid-content">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>附件</el-breadcrumb-item>
            <el-breadcrumb-item>全部</el-breadcrumb-item>
          </el-breadcrumb>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-collapse >
        <el-collapse-item title="SET ATTRIBUTES" name="1">
          <el-table :data="this.$parent.formData.info" border style="width: 100%">
            <el-table-column prop="index" label="INDEX">
              <template scope="scope">
                <span class="link" @click="getDetail(scope.row.index)">{{scope.row.index}}</span>
              </template>
            </el-table-column>
            <el-table-column prop="position" label="POSITION">
            </el-table-column>
            <el-table-column
              prop="type"
              label="TYPE">
            </el-table-column>
            <el-table-column
              prop="LOGICAL ID"
              label="logical_id">
            </el-table-column>
            <el-table-column
              prop="vendor_id"
              label="VENDOR ID">
            </el-table-column>
            <el-table-column
              prop="product_id"
              label="PRODUCT ID">
            </el-table-column>
            <el-table-column
              prop="revision"
              label="REVISION">
            </el-table-column>
            <el-table-column
              prop="responsive"
              label="RESPONSIVE">
              <template scope="scope">
                <input type="checkbox" v-model="scope.row.responsive">
              </template>
            </el-table-column>
            <el-table-column
              prop="disk_slot"
              label="DISK SLOT">
              <template scope="scope">
                <div v-if="scope.row.disk_slot !==false">
                  <i class="icon-format" @click="showChange2(scope.row.index)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="power_supply"
              label="POWER SUPPLY">
              <template scope="scope">
                <div v-if="scope.row.power_supply!==false">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="sep"
              label="SEP">
              <template scope="scope">
                <div v-if="scope.row.sep !==false">
                  <i class="icon-format" @click="showChange(scope.row.index)"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="fan"
              label="FAN">
              <template scope="scope">
                <div v-if="scope.row.fan!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="temp_sensor"
              label="TEMP SENSOR">
              <template scope="scope">
                <div v-if="scope.row.temp_sensor!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="volt_sensor"
              label="VOLT SENSOR">
              <template scope="scope">
                <div v-if="scope.row.volt_sensor!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="expander"
              label="EXPANDER">
              <template scope="scope">
                <div v-if="scope.row.expander!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="sas_connector"
              label="SAS CONNECTOR">
              <template scope="scope">
                <div v-if="scope.row.sas_connector!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="internal_disk"
              label="INTERNAL DISK">
              <template scope="scope">
                <div v-if="scope.row.internal_disk!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="ups"
              label="UPS">
              <template scope="scope">
                <div v-if="scope.row.ups!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-row></el-row>
        <el-collapse-item title="SET DISK SLOT ATTRBIBUTES" name="2" v-show="temperSensors.show">
          <el-table :data="temperSensors.table" border style="width: 100%">
            <el-table-column prop="subindex" label="SUB INDEX">
            </el-table-column>
            <el-table-column prop="enclindex" label="ENCL INDEX">
            </el-table-column>
            <el-table-column
              prop="enclposition"
              label="ENCL POSITION">
            </el-table-column>
            <el-table-column
              prop="position"
              label="POSITION">
            </el-table-column>
            <el-table-column
              prop="phy_disk_index"
              label="PHYSCIAL DISK INDEX">
            </el-table-column>
            <el-table-column
              prop="phy_disk_id"
              label="PHYSCIAL DISK ID">
            </el-table-column>
            <el-table-column
              prop="fault_status"
              label="FAULT STATUS">
              <template scope="scope">

                <div v-if="scope.row.fault_status=='ok'" style="color:green">
                  ok
                </div>
                <div v-else="" style="color:red">fault</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="ses_status"
              label="SES STATUS">
            </el-table-column>
            <el-table-column
              prop="power_status"
              label="POWER STATUS">
              <template scope="scope">
                <el-switch
                  v-model="scope.row.power_status"
                  on-color="#13ce66"
                  off-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="present"
              label="PRESENT">
              <template scope="scope">
                <input type="checkbox" v-model="scope.row.present">
              </template>
            </el-table-column>
            <el-table-column
              prop="ok_indicator"
              label="OK INDICATOR">
              <template scope="scope">
                <input type="checkbox" v-model="scope.row.ok_indicator">
              </template>
            </el-table-column>
            <el-table-column
              prop="sep"
              label="fault_INDICATOR">
              <template scope="scope">
                <div v-if="scope.row.sep!==''">
                  <i class="icon-update"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="predicted_indicator"
              label="PREDICTED FAILURE INDICATOR">
              <template scope="scope">
                <div v-if="scope.row.fan!==''">
                  <i class="icon-update"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="temp_sensor"
              label="LOCATE INDICATOR">
              <template scope="scope">
                <div v-if="scope.row.temp_sensor!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
        <el-row></el-row>
        <el-collapse-item title="SET DISK SLOT ATTRBIBUTES2" name="3" v-show="temperSensors2.show">
          <el-table :data="temperSensors2.table" border style="width: 100%">
            <el-table-column prop="subindex" label="SUB INDEX">
            </el-table-column>
            <el-table-column prop="enclindex" label="ENCL INDEX">
            </el-table-column>
            <el-table-column
              prop="enclposition"
              label="ENCL POSITION">
            </el-table-column>
            <el-table-column
              prop="position"
              label="POSITION">
            </el-table-column>
            <el-table-column
              prop="phy_disk_index"
              label="PHYSCIAL DISK INDEX">
            </el-table-column>
            <el-table-column
              prop="phy_disk_id"
              label="PHYSCIAL DISK ID">
            </el-table-column>
            <el-table-column
              prop="fault_status"
              label="FAULT STATUS">
              <template scope="scope">

                <div v-if="scope.row.fault_status=='ok'" style="color:green">
                  ok
                </div>
                <div v-else="">fault</div>
              </template>
            </el-table-column>
            <el-table-column
              prop="ses_status"
              label="SES STATUS">
            </el-table-column>
            <el-table-column
              prop="power_status"
              label="POWER STATUS">
              <template scope="scope">
                <el-switch
                  v-model="scope.row.power_status"
                  on-color="#13ce66"
                  off-color="#ff4949">
                </el-switch>
              </template>
            </el-table-column>
            <el-table-column
              prop="present"
              label="PRESENT">
              <template scope="scope">
                <input type="checkbox" v-model="scope.row.present">
              </template>
            </el-table-column>
            <el-table-column
              prop="ok_indicator"
              label="OK INDICATOR">
              <template scope="scope">
                <input type="checkbox" v-model="scope.row.ok_indicator">
              </template>
            </el-table-column>
            <el-table-column
              prop="sep"
              label="fault_INDICATOR">
              <template scope="scope">
                <div v-if="scope.row.sep!==''">
                  <i class="icon-update"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="predicted_indicator"
              label="PREDICTED FAILURE INDICATOR">
              <template scope="scope">
                <div v-if="scope.row.fan!==''">
                  <i class="icon-update"></i>
                </div>
              </template>
            </el-table-column>
            <el-table-column
              prop="temp_sensor"
              label="LOCATE INDICATOR">
              <template scope="scope">
                <div v-if="scope.row.temp_sensor!==''">
                  <i class="icon-update" @click="createDetail"></i>
                </div>
              </template>
            </el-table-column>
          </el-table>
        </el-collapse-item>
      </el-collapse>

    </el-row>


  </div>
</template>

<script>
  export default {
    name: 'hello',
    data () {
      return {
        activeNames: ['1'],
        temperSensors: {
          table: [{
            subindex: 1,
            enclindex: 2,
            enclposition: 1,
            position: 1,
            phy_disk_index: 99,
            phy_disk_id: '0x424y7329847128128',
            fault_status: 'ok',
            ses_status: '',
            power_status: true,
            present: true,
            ok_indicator: true,
            fault_indicator: '',
            predicted_indicator: '',
            locate_indicator: ''
          }],
          show: false
        },
        temperSensors2: {
          table: [{
            subindex: 1,
            enclindex: 2,
            enclposition: 1,
            position: 1,
            phy_disk_index: 99,
            phy_disk_id: '0x424y7329847128128',
            fault_status: 'ok',
            ses_status: '',
            power_status: true,
            present: true,
            ok_indicator: true,
            fault_indicator: '',
            predicted_indicator: '',
            locate_indicator: ''
          }],
          show: false
        }
      }
    },
    methods: {
      createDetail () {
        console.log('-')
      },
      showChange (index) {
        var addtable = {
          subindex: 4,
          enclindex: 2,
          enclposition: 6,
          position: 5,
          phy_disk_index: 99,
          phy_disk_id: '0x45159847128128',
          fault_status: 'false',
          ses_status: '',
          power_status: '',
          present: true,
          ok_indicator: false,
          fault_indicator: '',
          predicted_indicator: '',
          locate_indicator: ''
        }
        this.temperSensors.table.push(addtable)
        this.temperSensors.show = true
        this.activeNames.push('2')
        this.$parent.formData.info[index - 1].sep = false
      },
      showChange2 (index) {
        var addtable = {
          subindex: 4,
          enclindex: 2,
          enclposition: 6,
          position: 5,
          phy_disk_index: 99,
          phy_disk_id: '0x45159847128128',
          fault_status: 'false',
          ses_status: '',
          power_status: '',
          present: true,
          ok_indicator: false,
          fault_indicator: '',
          predicted_indicator: '',
          locate_indicator: ''
        }
        this.temperSensors2.table.push(addtable)
        this.temperSensors2.show = true
        this.activeNames.push('3')
        this.$parent.formData.info[index - 1].disk_slot = false
      }
    }
  }
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss" rel="stylesheet/scss">

</style>
